<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="preview/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="preview/css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="preview/css/index.css" />
</head>
<body>
<div class="readRank starModule">
    <div class="sxTitle">读者借阅排行</div>
    <div class="sxBgBorder">
        <div class="sxCorner"></div>
        <div class="sxCorner"></div>
        <div class="sxCorner"></div>
        <div class="sxCorner"></div>
        <div class="readerName">读者姓名</div>
        <div class="swiper-container swiper-container-read">
            <div class="swiper-wrapper">
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>1</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>2</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>3</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>4</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>5</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>6</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>7</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>8</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>9</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
                <div class="swiper-slide xycenterbox">
                    <div class="leftRank"><div>10</div></div>
                    <div class="middleName">朱一龙龙阳</div>
                    <div class="rightDownLoad">41523</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="preview/js/jquery.min.js"></script>
<!-- rem-->
<script src="preview/js/rem.js"></script>
<script src="preview/js/swiper.min.js"></script>
<!-- requestAnimation  兼容性包-->
<script src="preview/js/requestAnimationFrame.js"></script>
<!-- 动态添加兼容性前缀，写css不用写一大堆兼容了，写一句就行-->
<script src="preview/js/prefixfree.min.js"></script>
<!-- 不同浏览器的刷新频率，返回值是HZ-->
<script src="preview/js/browser.js"></script>
<!-- 自定义其他js-->
<script>
    var swiper=null;
    window.onload  = function() {
        getRem(100, 396);
        ////如果需要推数据重新实例化swiper，先将swiper对象销毁在实例化，对接数据时候注意这一点
        swiper = new Swiper('.swiper-container-read', {
            autoplay: {
                delay: 5000,
//                stopOnLastSlide: false,
                disableOnInteraction: true,////用户手动操作之后自动播放不会停止
            },
            loop : false,
            direction : 'vertical',
            slidesPerView : 8,
            slidesPerGroup:1,
//            pagination: {////分页器
//                el: '.swiper-pagination',
//                type: 'fraction',
//            },
        });
    };
    window.onresize= function() {
        getRem(100, 396);

    };
</script>
</body>
</html>